<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <h3>
      <center>Settings</center>
    </h3>
    
    <!-- Update basic user information -->
    <form name="basicForm" class="form-horizontal" ng-submit="$ctrl.updateBasicInfo(basicForm)" novalidate>
      <div class="box box-primary">
        <div class="box-header">
          <h3 class="box-title">Update basic information</h3>
        </div>
        <div class="box-body">

          <div class="form-group">
            <label class="col-md-3 control-label">Username</label>
            <div class="col-md-9">
              <input type="text" class="form-control input-sm" ng-model="$ctrl.basicData.username" readonly/>
            </div>
          </div>
          <div class="form-group" ng-class="{ 'has-error' : !basicForm.name.$pristine && basicForm.name.$invalid}">
            <label class="col-md-3 control-label">Full name
              <i class="fa fa-asterisk text-danger"></i>
            </label>
            <div class="col-md-9">
              <input type="text" name="name" class="form-control input-sm" placeholder="Full name" ng-model="$ctrl.basicData.name" required/>
              <div ng-messages="basicForm.name.$error" ng-show="!basicForm.name.$pristine && basicForm.name.$error">
                <div ng-messages-include="settings-error.html"></div>
              </div>
            </div>
          </div>

          <div class="form-group" ng-class="{ 'has-error' : basicForm.avatar.$error.maxsize}">
            <label class="col-md-3 control-label">Avatar</label>
            <div class="col-md-9">
              <div ng-show="!$ctrl.basicData.avatar">
                <div style="width: 100px;">
                  <img alt="User avatar" src="../../../assets/images/no-avatar.png" />
                  <input type="file" class="mt-xxs avatar-input" ng-model="$ctrl.avatar" id="avatar-input" name="avatar" accept="image/jpg|image/png|image/jpeg"
                    maxsize="500" base-sixty-four-input do-not-parse-if-oversize>
                  <label for="avatar-input" class="mt-xxs btn btn-block btn-sm btn-primary">Choose File</label>
                </div>
                <div class="help-block">Images must not exceed 500 KB. Recommended dimensions are 100x100px</div>

              </div>

              <div ng-show="$ctrl.basicData.avatar" style="width: 100px;">
                <img alt="User avatar" data-ng-src="{{'data:image/jpeg;base64,' + $ctrl.basicData.avatar}}" />
                <br>
                <button class="mt-xxs btn btn-block btn-sm btn-danger" type="button" ng-click="$ctrl.clearAvatar(basicForm)">Clear</button>
              </div>

              <div ng-messages="basicForm.avatar.$error" ng-show="!basicForm.avatar.$pristine && basicForm.avatar.$error">
                <div ng-messages-include="settings-error.html"></div>
              </div>
            </div>
          </div>

          <div class="mt-s">
            <button class="btn btn-default" ng-click="$ctrl.cancel()" type="button">Cancel</button>
            <span class="ml-xxs">
              <i class="fa fa-asterisk text-danger"></i>&nbsp;Required field</span>
            <button class="btn btn-primary pull-right" ng-disabled="basicForm.$invalid" type="submit">Save</button>
          </div>

        </div>
      </div>
    </form>

    <!-- Update user password -->
    <form ng-if="$ctrl.canChangePass" class="form-horizontal mt-s" name="passForm" ng-submit="$ctrl.updatePassword(passForm);" novalidate>
      <div class="box box-primary">
        <div class="box-header">
          <h3 class="box-title">
            <input type="checkbox" ng-model="$ctrl.passData.changePassword" ng-click="$ctrl.clearPassword(passForm, $ctrl.passData.changePassword)"> Update password</h3>
        </div>
        <div class="box-body" ng-show="$ctrl.passData.changePassword">
          <div class="form-group" ng-class="{ 'has-error' : !passForm.currentPassword.$pristine && passForm.currentPassword.$invalid}">
            <label class="col-md-3 control-label">Old password
              <i class="fa fa-asterisk text-danger"></i>
            </label>
            <div class="col-md-9">
              <input type="password" name="currentPassword" class="form-control input-sm" placeholder="Current password" autocomplete="off"
                ng-model="$ctrl.passData.currentPassword" ng-required="$ctrl.passData.changePassword" />
              <div ng-messages="passForm.currentPassword.$error" ng-show="!passForm.currentPassword.$pristine && passForm.currentPassword.$error">
                <div ng-messages-include="settings-error.html"></div>
              </div>
            </div>
          </div>

          <div class="form-group" ng-class="{ 'has-error' : !passForm.password.$pristine && passForm.password.$invalid}">
            <label class="col-md-3 control-label">New password
              <i class="fa fa-asterisk text-danger"></i>
            </label>
            <div class="col-md-9">
              <input type="password" name="password" class="form-control input-sm" placeholder="New password" autocomplete="off" ng-model="$ctrl.passData.password"
                ng-required="$ctrl.passData.changePassword" />
              <div ng-messages="passForm.password.$error" ng-show="!passForm.password.$pristine && passForm.password.$error">
                <div ng-messages-include="settings-error.html"></div>
              </div>
            </div>
          </div>

          <div class="form-group" ng-class="{ 'has-error' : !passForm.confirmPassword.$pristine && passForm.confirmPassword.$invalid}">
            <label class="col-md-3 control-label">Confirm new password
              <i class="fa fa-asterisk text-danger"></i>
            </label>
            <div class="col-md-9">
              <input type="password" name="confirmPassword" class="form-control input-sm" placeholder="Confirm Password" compare-to="$ctrl.passData.password"
                autocomplete="off" ng-model="$ctrl.passData.passwordConfirm" ng-required="$ctrl.passData.changePassword" />
              <div ng-messages="passForm.confirmPassword.$error" ng-show="!passForm.confirmPassword.$pristine && passForm.confirmPassword.$error">
                <div ng-messages-include="settings-error.html"></div>
              </div>
              <div ng-class="{'has-error': $ctrl.passData.password!=$ctrl.passData.password2, 'has-success': $ctrl.passData.password==passData.password2 && $ctrl.passData.password1!=''}">
                <div ng-show="$ctrl.passData.password1 != $ctrl.passData.password2">Oops, that's not the same password as the first one</div>
              </div>
            </div>
          </div>

          <div class="mt-s">
            <button class="btn btn-default" ng-click="$ctrl.cancel()" type="button">Cancel</button>
            <span class="ml-xxs">
              <i class="fa fa-asterisk text-danger"></i>&nbsp;Required field</span>
            <button class="btn btn-primary pull-right" ng-disabled="passForm.$invalid" type="submit">Save</button>
          </div>
        </div>
      </div>
    </form>

    <!-- Update API Key -->
    <form ng-if="$ctrl.canChangeKey">
      <div class="box box-primary">
        <div class="box-header" ng-if="$ctrl.currentUser.hasKey">
          <h3 class="box-title">API Key</h3>
        </div>
        <div class="box-body">          
          <div class="callout callout-warning mv-0" ng-if="!$ctrl.currentUser.hasKey">
            <h4>You don't have any API key.</h4>          
            <p> Please contact your organization's administrator.</p>
          </div>
          <div class="form-group" ng-if="$ctrl.currentUser.hasKey">
            <p>You have an API key defined. You can renew it if needed.</p>
            <div class="input-group">
              <span class="input-group-btn">
                <span class="btn btn-default" ng-click="$ctrl.createKey()">Renew</span>
                <span class="btn btn-primary" ng-click="$ctrl.getKey()" ng-if="!$ctrl.keyData.key">Reveal</span>
              </span>
              <input class="form-control" readonly ng-model="$ctrl.keyData.key" ng-if="$ctrl.keyData.key">
              <span class="input-group-btn" ng-if="$ctrl.keyData.key">
                <button class="btn btn-primary" type="button" ng-click="$ctrl.copyKey()">
                  <i class="fa fa-copy"></i>
                </button>
              </span>
            </div>            
          </div>
        </div>
      </div>
    </form>

  </div>
</div>

<script id="settings-error.html" type="text/ng-template">
    <div class="mt-xxs text-danger" ng-message="required">
        This field is required
    </div>
    <div class="mt-xxs text-danger" ng-message="minlength">
        <span translate="error.form.minlength"></span>
    </div>
    <div class="mt-xxs text-danger" ng-message="maxlength">
        <span translate="error.form.maxlength"></span>
    </div>
    <div class="mt-xxs text-danger" ng-message="maxsize">
        Files must not exceed 500 KB
    </div>
    <div class="mt-xxs text-danger" ng-message="compareTo">
        Oops, that's not the same password as the first one
    </div>
</script>